<template>
    <div class="round-tab">
        <div class="round-tab-container display-flex">
            <div class="round-tab-item" v-for="(item, index) in roundTabList" :key="index"
                :class="{ active: active === item.value }" @click="clickTabs(item)">
                {{ item.label }}
            </div>
        </div>
    </div>


</template>

<script setup>
  let props = defineProps({
      roundTabList:{
          type:Array,
          default:()=>[]
      },
      active:{
          type:String,
          default:''
      }
  })
  let emit = defineEmits(['clickTabs'])
  let clickTabs=(item)=>{
      emit('clickTabs',item)
  }
</script>

<style lang="scss" scoped>
.round-tab{background-color: var(--bg-color);padding: 20px 0;}
.round-tab-container {
 height: 80px;border-radius: 80px;background-color: var(--white);
}
.round-tab-item{flex: 1;height: 80px;line-height: 80px; text-align: center;
    border-radius: 80px;
    &.active{
        background-color: var(--red-color);color:var(--white) ;
    }
}
</style>